<template>
  <div class="header">
    <div class="city">西安</div>
    <div class="search"  @click="goSearch">
        <img src="../assets/logo.png" alt="">
        <span class="line"></span>
        <input type="text" placeholder="柜式空调">
        <span class="iconfont icon-sousuo"></span>
    </div>
    <div class="login" @click="gologin">{{msg}}</div>
  </div>
</template>

<script>
export default {
  daya(){
    return{
      msg:'登录'
    }
  },
  methods: {
    gologin(){
      this.$router.push('/login')
    },
    goSearch(){
    console.log('我要去搜索');
    this.$router.push('/search')
  }
  } ,
  created(){
    if(localStorage.getItem('token')){
      this.msg='已登录'
    }else{
      this.msg='登录'
    }
  }
}
</script>

<style scoped>
  @import url(../../src/font_3678021_vxqmaoc6uce/iconfont.css);

  .header{
    width: 100%;
    height: 3.125rem;
    background-color: rgba(247, 57, 57, 0.902);
    display: flex;
    align-items: center;
  }

  .search{
      flex: 1;
      position: relative;
  }
  .header .search input{
    height:2.1875rem;
    border-radius: .9375rem;
    vertical-align: bottom;
    border: none;
    width: 100%;
    box-sizing: border-box;
    padding-left: 5rem;
  }

  .search img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .line{
    display: block;
    position: absolute;
    width: 0;
    height: 1.5625rem;
    border-right: 2px solid gray;
    left: 3.125rem;
    top: 50%;
    transform: translateY(-50%);
   
  }
  
  .search .iconfont{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 3.9rem;
    font-size: 1.25rem;
  }
  .city,.login{
    width: 3.75rem;
    height: 100%;
    line-height: 3.125rem;
    text-align: center;
  }
</style>